<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99" id="content" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<text>{{title}}</text>
			</view>
		</view>
		<view class="billBox w-100 pb-2" :style="{paddingTop: PaddingTop + 'px'}">
			<view class="billItem d-flex d-flex-column" v-for="(key, index) in Object.keys(monthHashMap)" :key="index" >
				<view class="billTitle d-flex d-flex-between d-flex-middle color71">
					<view class="ml-3">{{key}}</view>
					<view class="d-flex">
						<view class="income mr-3">收入  {{monthHashMap[key].statisticVo.addChangeAmount}} 嗒币</view>
						<view class="TransferOut mr-3">转出 {{monthHashMap[key].statisticVo.reduceChangeAmount}} 嗒币</view>
					</view>
				</view>
				<view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3" v-for="(i,index) in monthHashMap[key].page.records " :key="i.id">
					
					<view v-if="i.changeType==-1" class="d-flex-column">
						<view  class="font30">搭币消费</view>
						
						<view class="mt-1 font26 color71">{{i.changeTime}}</view>
					</view>
					<view v-if="i.changeType==-1" class="font-bold">-{{i.changeAmount}}</view>
				
					
					<view v-if="i.changeType==1" class="d-flex-column">
						<view class="font30">搭币充值</view>
						<view class="mt-1 font26 color71">{{i.changeTime}}</view>
					</view>
					<view v-if="i.changeType==1" class="font-bold colore2395d">+{{i.changeAmount}}</view>
					
				</view>
				
			</view>
			<!-- <view class="billItem d-flex d-flex-column">
				<view class="billTitle d-flex d-flex-between d-flex-middle color71">
					<view class="ml-3">2025年2月</view>
					<view class="d-flex">
						<view class="income mr-3">收入 49嗒币</view>
						<view class="TransferOut mr-3">转出 7嗒币</view>
					</view>
				</view>
				<view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3">
					<view class="d-flex-column">
						<view class="font30">直播间充值</view>
						<view class="mt-1 font26 color71">02月28日 23:30</view>
					</view>
					<view class="font-bold colore2395d">+42</view>
				</view>
				<view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3" v-for="i in 2" :key="i.id">
					<view class="d-flex-column">
						<view class="font30">给主播送礼</view>
						<view class="d-flex d-flex-middle mt-1">
							<image src="https://img.rongyuejiaoyu.com/uploads/20240728/02511242750.jpeg" class="rounded mr-1" style="width: 40rpx; height: 40rpx;"></image>
							<view class="color71">老陶聊电商（冰玫瑰）</view>
						</view>
						<view class="mt-1 font26 color71">02月28日 23:26</view>
					</view>
					<view class="font-bold">-6</view>
				</view>
				<view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3">
					<view class="d-flex-column">
						<view class="font30">直播间充值</view>
						<view class="mt-1 font26 color71">02月28日 23:30</view>
					</view>
					<view class="font-bold colore2395d">+7</view>
				</view>
			</view> -->
			<!-- <view class="billItem d-flex d-flex-column">
				<view class="billTitle d-flex d-flex-between d-flex-middle color71">
					<view class="ml-3">2025年1月</view>
					<view class="d-flex">
						<view class="income mr-3">收入 49嗒币</view>
						<view class="TransferOut mr-3">转出 7嗒币</view>
					</view>
				</view>
				<view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3">
					<view class="d-flex-column">
						<view class="font30">直播间充值</view>
						<view class="mt-1 font26 color71">02月28日 23:30</view>
					</view>
					<view class="font-bold colore2395d">+42</view>
				</view> -->
			<!-- 	<view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3" v-for="i in 2" :key="i.id">
					<view class="d-flex-column">
						<view class="font30">给主播送礼</view>
						<view class="d-flex d-flex-middle mt-1">
							<image src="https://img.rongyuejiaoyu.com/uploads/20240728/02511242750.jpeg" class="rounded mr-1" style="width: 40rpx; height: 40rpx;"></image>
							<view class="color71">老陶聊电商（冰玫瑰）</view>
						</view>
						<view class="mt-1 font26 color71">02月28日 23:26</view>
					</view>
					<view class="font-bold">-6</view>
				</view> -->
				<!-- <view class="billDesc d-flex d-flex-between d-flex-middle border-b-f0 ml-3 mr-3">
					<view class="d-flex-column">
						<view class="font30">直播间充值</view>
						<view class="mt-1 font26 color71">02月28日 23:30</view>
					</view>
					<view class="font-bold colore2395d">+7</view>
				</view> -->
			<!-- </view> -->
			<view v-if="isempty">
			 <text class="d-flex  font30" style=" justify-content: center; color: #585858;  ">---到底了---</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import store from '@/store/index.js';
	import { PayApi } from '../../http/PayApi';
	export default {
		data() {
			return {
				title: '嗒币明细',
				PaddingTop: null,
				billList:[],
				now:0,
				addChangeAmount:0,
				reduceChangeAmount:0,
				param:{
					resourceTypeList:3,
					pageIndex:1,
					pageSize:20,
					changeTimeAfter:null,
					changeTimeBefore:null
				},
				monthHashMap:{},
				iscontinue:false,
				year:0,
				month:0,
				isempty:false,
				isLastPage:false,
				 bill: {
					 
					 page:{
						records:[] 
					 },
				        statisticVo: {
				          addChangeAmount: 0,
				          reduceChangeAmount: 0
				        }
				      },
				
			}
		},
		components:{TitleBarVue},
		onReady() {
			this.setPaddingTop()
		},
		onReachBottom() {
		    if(this.iscontinue){ // 当前月还有数据
		        this.param.pageIndex += 1;
		        this.getBill(this.year, this.month);
		    } else { // 需要查询上个月的数据
			 this.param.pageIndex += 1;
		        let newMonth = this.month - 1;
		        let newYear = this.year;
		        if (newMonth < 1) {
		            newMonth = 12;
		            newYear -= 1;
		        }
		        
		        // 设置查询时间范围
		        this.param.changeTimeAfter = `${String(newYear)}-${String(newMonth).padStart(2, '0')}-01 00:00:00`;
		        this.param.changeTimeBefore = `${String(newYear)}-${String(this.month).padStart(2, '0')}-01 00:00:00`;
		        
		        // 更新当前年月
		        this.year = newYear;
		        this.month = newMonth;
		        
		        // 重置分页参数
		        this.param.pageIndex = 1;
		        
		        this.getBill(this.year, this.month);
		    }
		},
		
		onLoad() {
		    // 获取当前时间
		    const now = new Date();
		    const year = now.getFullYear();
		    const month = now.getMonth() + 1;
		    this.year = year;
		    this.month = month;
		    
		    // 设置初始查询时间范围
		    this.param.changeTimeAfter = `${year}-${String(month).padStart(2, '0')}-01 00:00:00`;
		    this.param.changeTimeBefore = `${year}-${String(month + 1).padStart(2, '0')}-01 00:00:00`;
		    
		    // 首次查询
		    this.getBillWithFallback(year, month);
		},
		methods: {
		    async getBillWithFallback(year, month) {
		        let hasData = await this.getBill(year, month);
		        
		        // 如果当前月没有数据，查询上个月
		        if (!hasData) {
		            let newMonth = month - 1;
		            let newYear = year;
		            if (newMonth < 1) {
		                newMonth = 12;
		                newYear -= 1;
		            }
		            
		            // 更新查询时间范围
		            this.param.changeTimeAfter = `${newYear}-${String(newMonth).padStart(2, '0')}-01 00:00:00`;
		            this.param.changeTimeBefore = `${newYear}-${String(newMonth + 1).padStart(2, '0')}-01 00:00:00`;
		            
		            // 更新当前年月
		            this.year = newYear;
		            this.month = newMonth;
		            
		            await this.getBill(newYear, newMonth);
		        }
		    },
		    async getBill(year, month) {
				if(this.isempty){
					return
				}
		        let res = await PayApi.getBill(this.param);
		        
		        if(res.page.total == 0) {
					this.isempty=true;
		            return false; // 没有数据
		        }
		        
		        const key = `${year}-${String(month).padStart(2, '0')}`;
		        
		        if(this.param.pageIndex == 1) { // 第一次查询
		            this.monthHashMap[key] = res;
		        } else { // 分页查询
		            // 合并记录
		            this.monthHashMap[key].page.records = [
		                ...this.monthHashMap[key].page.records,
		                ...res.page.records
		            ];
		            // 更新统计数据
		            this.monthHashMap[key].statisticVo.addChangeAmount += res.statisticVo.addChangeAmount;
		            this.monthHashMap[key].statisticVo.reduceChangeAmount += res.statisticVo.reduceChangeAmount;
		        }
		        
		        // 判断是否还有数据
		        if(res.page.records.length < this.param.pageSize) {
		            this.iscontinue = false; // 当前月没有更多数据了
					return false;
		        } else {
		            this.iscontinue = true; // 当前月还有数据
					return true; // 有数据
		        }
		        
		        
		    
		
				
				
				
				
				
				
				
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			setPaddingTop() {
				let element = "#content"
				const query = uni.createSelectorQuery().in(this);
				return new Promise((resolve) => {
					query.select(element)
						.boundingClientRect()
						.exec((res) => {
							if (res && res[0]) {
								this.PaddingTop = res[0].height;
								resolve(res[0].height);
							} 
						});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.billBox {
		.billItem {
			.billTitle {
				height: 80rpx;
				background-color: #f3f3f5;
			}
			.billDesc {
				min-height: 90rpx;
				padding: 30rpx 0;
			}
		}
	}
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.content .title {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding-right: 47rpx;
		border-bottom: 1px solid rgba(204, 204, 204, .2);
	}
	.content .title text {
		flex: 1;
		font-size: 32rpx;
		text-align: center;
		font-weight: normal;
	}
	.z-index-99 {
		z-index: 99;
	}
	.color71 {
		color: #717171;
	}
	.colore2395d {
		color: #e2395d;
	}
	.border-b-f0{
		border-bottom: 1px solid #f0f0f0;
	}
}
.loading-more {
    text-align: center;
    padding: 20rpx 
	}
</style>
